<template>
	<div class="recharge-card same-change-oldstyle">
		<div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>模板管理</el-breadcrumb-item>
						<el-breadcrumb-item :to="{ path: '/partnerTemplate' }">代客充值模板</el-breadcrumb-item>
						<el-breadcrumb-item>模板列表</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">
						刷新
					</button>
				</div>
			</div>
		</div>
		<div class="same-table-box">
			<div class="tabel_header inset-header">
				<h4 class="same-title-box">代客充值模板</h4>
				<el-button class="add-btn" type="primary" @click="addTemplate" size="small">添加模板</el-button>
			</div>
			<div class="table_box">

				<el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
					:data="tableData" stripe>
					<el-table-column type="expand">
						<template slot-scope="props">
							<div class="expand-div">
								<span class="table-colum-expand-span">模板配置：</span>
								<el-tag class="m-r-10" type="info" v-for="(item,index) in props.row.template" :key="index">
									充值<b>{{item.recharge}}</b>元/<b>赠送{{item.give}}</b>元
								</el-tag>
							</div>

						</template>
					</el-table-column>

					<el-table-column header-align="center" width="70" align="center" label="序号">
						<template slot-scope="scope">
							{{scope.$index+1+(pageNo-1)*pageSize}}
						</template>
					</el-table-column>

					<el-table-column align="center" label="模板标题">
						<template slot-scope="scope">
							<div class="template-title">{{scope.row.template_title}}
								<div class="at-badge__num" v-if="scope.row.is_default==1">默认</div>
							</div>

						</template>
					</el-table-column>

					<el-table-column align="center" label="状态">
						<template slot-scope="scope">
							<el-tag size='small' v-if="scope.row.template_status==2" type="danger">禁用</el-tag>
							<el-tag size='small' v-if="scope.row.template_status==1" type="success">启用</el-tag>
						</template>
					</el-table-column>


					<el-table-column align="center" label="有效期">
						<template slot-scope="scope">
							<span v-if="scope.row.template_type==2">永久有效</span>
							<span v-if="scope.row.template_type==1">{{scope.row.start_time | subStrTime}} -
								{{scope.row.end_time | subStrTime}} </span>
						</template>
					</el-table-column>

					<el-table-column align="center" prop="add_time" label="创建时间">
					</el-table-column>

					<el-table-column align="center" width="260" label="操作">
						<template slot-scope="scope" v-if="scope.row.id!=0">
							<el-link class="custom-link" @click="editTemplate(scope.row.id)">编辑</el-link>
							<el-popover placement="top" width="160" v-model="scope.row.visible">
								<p class="tips-padding">是否<span class="normal-color" v-if="scope.row.template_status==2">启用</span><span
										v-if="scope.row.template_status==1" class="forbidden-color">禁用</span>当前价格模板？</p>
								<div style="text-align: right; margin: 0">
									<el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
									<el-button type="primary" size="mini"
										@click="switchStatus(scope.row.id,scope.$index,scope.row.template_status)">确定</el-button>
								</div>
								<el-button class="custom-link" @click="showPopover(scope.$index)" slot="reference">
									{{scope.row.template_status==2?'启用':'禁用'}}</el-button>
							</el-popover>
							<el-button v-if="scope.row.is_default!=1" class="custom-link" @click="setDefault(scope.$index)"
								slot="reference">设为默认</el-button>
							<el-link class="custom-link" @click="deleteTemplate(scope.row.id,scope.row.template_title,scope.$index)">
								删除</el-link>
						</template>
					</el-table-column>

					<template slot="empty" v-if="isLoad">
						<div class="new-no-data-show">
							<img src="../../assets/images/no-data.png" alt="">
							<div>暂无相关数据</div>
						</div>
					</template>
				</el-table>

				<div class="same-page-inShow" v-if="tableData.length>0 && isLoad">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page.sync="pageNo" :page-sizes="pageSizesList" :page-size="pageSize"
						layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "partnerTemplate",
		data() {
			return {
				visible: false,
				pageNo: 1,
				pageSize: 15,
				pageSizesList: [15, 30, 40, 50],
				tableData: [], // 返回的结果集合
				totalDataNumber: 0, // 数据的总数,-----
				isLoad: true,
				loading: false,//加载动画
			};
		},
		inject: ["reload"],
		created() {
			this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
			var page = this.pageNo; // 当前页
			var pageSize = this.pageSize; // 每页条数
			this.getTemplateList(page, pageSize);
		},
		filters: {
			subStrTime(value) {
				if (!value) return '--';
				if (value.length >= 10) {
					return value.substring(0, 10)
				} else {
					return '--';
				}
			}
		},
		methods: {


			setDefault(index) {
				let template = this.tableData[index];
				if (template.template_status == 2) {
					this.$message.error("请先启用模板");
					return false;
				}
				if (template.is_default == 1) return;
				this.$confirm(`是否设置[${template.template_title}]设为默认模板？`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					const loading = this.$loading({
						lock: true,
						text: '数据处理中...',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
					this.$post({
						url: "Partner/Village/templateDefault",
						data: {
							id: template.id,
							is_default: 1
						},
						success: res => {
							loading.close();
							if (res.code == 1000) {
								this.$message.success(res.message)
								this.getTemplateList(this.pageNo, this.pageSize);
							} else {
								this.$message.error(res.message)
							}
						},
						error: e => {
							loading.close();
							this.$message.error("网络错误")
						}
					})
				}).catch(() => {

				});
			},

			showPopover(index) {
				this.$set(this.tableData[index], "visible", true);
			},

			addTemplate() {
				this.$router.push({ path: "/partnerTemplateAdd" });
			},
			editTemplate(id) {
				this.$router.push({
					path: "/partnerTemplateAdd", query: {
						id
					}
				});
			},

			deleteTemplate(id, title, index) {
				this.$confirm(`是否删除价格模板[${title}]?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					const loading = this.$loading({
						lock: true,
						text: '数据处理中...',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
					this.$post({
						url: "Partner/Village/editTemplate",
						data: {
							id: id,
							is_delete: true
						},
						success: res => {
							loading.close();
							if (res.code == 1000) {
								this.$message.success(res.message, "success");
								this.totalDataNumber = this.totalDataNumber - 1;
								let list = this.tableData;
								list.splice(index, 1);
								if (list.length == 0) {
									if (this.pageNo > 1) {
										this.pageNo = this.pageNo - 1;
									} else {
										this.pageNo = 1;
									}
									this.getTemplateList(this.pageNo, this.pageSize);
								} else {
									this.tableData = list;
								}
							} else {
								this.$message.error(res.message)
							}
						},
						error: e => {
							loading.close();
							this.$message.error("网络错误")
						}
					})
				}).catch(() => {

				});
			},

			switchStatus(id, index, status) {
				const loading = this.$loading({
					lock: true,
					text: '数据处理中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$post({
					url: "Partner/Village/templateStatus",
					data: {
						id: id,
						template_status: status == 1 ? 2 : 1
					},
					success: res => {
						loading.close();
						if (res.code == 1000) {
							this.$message.success(res.message);
							this.tableData[index].template_status = status == 1 ? 2 : 1;
							this.tableData[index].visible = false;
						} else {
							this.$message.error(res.message);
						}
					},
					error: e => {
						loading.close();
						this.$message.error("网络错误")
					}
				})
			},

			//获取充值卡列表
			getTemplateList(page, pageSize) {
				this.loading = true; //打开loading动画
				this.isLoad = false; //是否请求接口
				this.$post({
					url: "Partner/Village/templateList",
					data: {
						row: pageSize,
						page: page,
						template_species: 3,
					},
					success: res => {
						this.loading = false; //关闭动画
						this.isLoad = true; //是否请求接口
						if (res.code == 1000) {
							const list = res.data.data;
							this.tableData = list;
							this.totalDataNumber = parseInt(res.data.page.total_number);
						} else {
							this.$message.error(res.message || "网络错误");
						}
					}
				});
			},

			// 每页
			handleSizeChange(val) {
				var that = this;
				that.pageSize = val; // 当前每页显示条数
				that.pageNo = 1;
				that.getTemplateList(that.pageNo, val); // 获取设备列表数据
			},
			// 分页
			handleCurrentChange(val) {
				var that = this;
				var pageSize = that.pageSize; // 每页条数
				that.pageNo = val;
				that.getTemplateList(val, pageSize); // 获取设备列表数据
			},

			RefreshFun() {
				this.reload();
			}
		}
	};
</script>
<style scoped>
	.normal-color {
		color: #67C23A;
		font-weight: bold;
	}

	.forbidden-color {
		color: #F56C6C;
		font-weight: bold;
	}

	.inset-header {
		padding: 0 10px 10px !important;
	}

	.recharge-card .table_box table img {
		width: auto !important;
	}

	.tips-padding {
		padding: 10px 0;
	}

	.table-colum-expand-span {
		color: #99a9bf !important;
	}

	.expand-div {
		margin-top: 10px;
	}

	.expand-div:first-child {
		margin-top: 0;
	}

	.m-r-10 {
		margin: 5px;
	}

	.template-title {
		position: relative;
		display: inline-block;
	}

	.at-badge__num {
		height: 20px;
		padding: 0 8px;
		line-height: 20px;
		top: 0px;
		right: -22px;
		color: #fff;
		font-size: 12px;
		border-radius: 7px 7px 7px 0;
		-webkit-transform: translate(50%, 0);
		transform: translate(50%, 0);
		z-index: 1;
		position: absolute;
		background: #ff4949;
		box-shadow: 2px 2px 0 rgba(255, 73, 73, .2);
		overflow: hidden;
	}
</style>